<template>
<div class="HomeIndex">
  <div class="Home-one">
  <BulletinBoard></BulletinBoard>
  <RotationChart></RotationChart>
  </div>
  <div class="Home-two">
    <h3 style="font-size:200%">最新求助</h3>
  <OrderHome ref="OrderHome"></OrderHome>
  </div>
</div>
</template>

<script>
import RotationChart from "@/views/home/RotationChart.vue";
import BulletinBoard from "@/views/home/BulletinBoard.vue";
import OrderHome from "@/components/order/OrderHome.vue";
import { throttle } from "throttle-debounce";
export default {
  name: "HomeIndex",
  components: {OrderHome, BulletinBoard, RotationChart},
  data () {
    return {

    }
  },
  computed: {
  },
  mounted() {
    // // 性能优化：节流，每隔一段固定的时间，再去执行指定的功能
    this.loading = throttle(1300, this.handleScroll.bind(this));
    window.addEventListener("scroll", this.loading,false);
  },
  destroyed() {
    // 防止组件被解绑之后，监听事件依然存在，需要解绑
    window.removeEventListener("scroll", this.loading);
  },
  methods: {
    handleScroll(){
      let scrollTop = document.documentElement.scrollTop;//滚动高度
      let clientHeight = document.documentElement.clientHeight;//可视高度
      let scrollHeight = document.documentElement.scrollHeight;//内容高度
      let numHeight = scrollTop + clientHeight;
      if (scrollHeight > clientHeight && numHeight > scrollHeight - 1) {
        this.$refs.OrderHome.view()
      }
    },

  }
}
</script>

<style scoped>
.HomeIndex {
  width: 1200px;
  /*border: 1px solid #FFB3B3;*/
  border-radius: 20px 20px 0 0;
  margin: 0 auto;
  background-color: white;
}
.Home-one{
  height: 620px;
}
.Home-two{
  margin-top: 0px;
  clear: left;
}
</style>
